<template>
	<view class="account-managers_page full tab-bar-page">
		<view class="account-managers_user w-full flex items-center">
			<view class="flex">
				<view class="avatar flex-center">
					<image src="../../../static/images/common/user.png"></image>
					<!-- {{
					userInformation.name?.substring(
						userInformation.name?.length - 2,
						userInformation.name?.length,
					)
				}} -->
				</view>
				<view class="content flex">
					<text class="name">{{ userInformation.name }}</text>
					<text class="phone">{{ userInformation.phone }}</text>
				</view>
			</view>
			<van-button type="primary" @click="quit">退出</van-button>
		</view>
		<view class="account-managers_matters">
			<slot name="content"></slot>
		</view>
		<!-- <scroll-view scroll-x class="account-managers_bar scrollbar-none w-hull">
      <view class="flex list">
        <view class="item" v-for="(i, j) in barList" :key="i.id" @click="gotoMatters(i)">
          <van-badge
            :content="i.number"
            max="99"
            :show-zero="false"
            class="item"
            :offset="['-30rpx']"
          >
            <van-icon name="chat-o" />
            <text class="w-full">{{ i.text }}</text>
          </van-badge>
        </view>
      </view>
    </scroll-view> -->
		<!-- <view class="account-managers_jump flex items-center">
      <view class="appraise">
        <el-icon><Edit color="#999" /></el-icon>
        <text>评价中心</text>
      </view>
      <el-icon><ArrowRight color="#999" /></el-icon>
    </view> -->
	</view>
</template>
<script setup>
import { USER_INFO_KEY } from "../../../enums/cacheEnum";

// 用户信息
const userInformation = cache.get(USER_INFO_KEY);

// 退出
const quit = () => {
	uni.showModal({
		title: "提示",
		content: "确定退出吗？",
		success: function (res) {
			if (res.confirm) {
				cache.clear();
				uni.reLaunch({
					url: "/pages/login/index",
				});
			} else if (res.cancel) {
			}
		},
	});
};
</script>
<style lang="scss" scoped>
.account-managers_ {
	&page {
		--user-height: 200rpx;
		box-sizing: border-box;
	}
	&matters {
		height: calc(100% - var(--window-bottom));
	}
	&user {
		background-color: $uni-bg-color;
		padding: 40rpx 50rpx;
		justify-content: space-between;
		box-sizing: border-box;
		height: var(--user-height);
		.avatar {
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			border-radius: 50%;
			background-color: $uni-color-primary;
			margin-right: 20rpx;
			color: $uni-text-color-inverse;
			font-weight: bold;
			image{
				width: 70%;
				height: 70%;
			}
		}
		.content {
			flex-direction: column;
			text {
				color: $uni-color-primary;
				line-height: 50rpx;
			}
			.name {
				font-size: 30rpx;
				font-weight: bold;
			}
			.phone {
				font-size: 26rpx;
			}
		}
	}
	&jump {
		background-color: $uni-bg-color;
		padding: 30rpx 20rpx;
		margin: 10rpx 0;
		justify-content: space-between;
		.appraise {
			text {
				margin-left: 20rpx;
				font-size: 26rpx;
				color: $uni-text-color-grey;
			}
		}
	}
}
</style>
